<template>
    <div class="bbox">
        <div v-if="token">
            <van-tabs v-model="activeName">
                <littleblack :height="10" :background="background"></littleblack>
                <van-tab title="订阅课程" name="a">
                    <listinschool :list="list"></listinschool>
                </van-tab>
                <van-tab title="收藏课程" name="b"><listinschool :list="arr"></listinschool></van-tab>
            </van-tabs>
        </div>

        <div v-else>
            <div class="empty-box">
                <div class="img">
                    <img src="http://h5.xiaomage.tech/static/img/img-placeholder.02168418.png" alt="" />
                </div>
            </div>
            <div class="btn" @click="gotoPassword">
                <div>登录查看</div>
            </div>
        </div>
        <footerv></footerv>
    </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
Vue.use(Tab).use(Tabs);
import footerv from "@/components/FooTerv.vue";
import littleblack from "@/components/LittleBlack.vue";
import listinschool from "@/components/ListInschool.vue";
export default {
    data() {
        return {
            token: "",
            activeName: "a",
            background: "#f3f6f9",
            list: [],
            arr: [],
        };
    },
    methods: {
        gotoPassword() {
            this.$router.push({
                path: "password",
                query: {
                    url: window.location.href,
                },
            });
        },
    },
    async created() {
        let token = localStorage.getItem("h5-token");
        if (token) {
            this.token = token;
            await this.$request.get("/api/v2/member/detail", {
                params: {
                    Authorization: `Bearer ${token}`,
                },
            });
            let res = await this.$request.get("/api/v2/member/courses", {
                params: {
                    page: 1,
                    size: 10,
                    loading: true,
                },
            });
            this.list = res.data.data;
            let sck = await this.$request.get("/api/v2/member/courses/like", {
                params: {
                    page: 1,
                    size: 100,
                    loading: true,
                },
            });
            this.arr = sck.data.data;
        }
    },
    components: {
        footerv,
        littleblack,
        listinschool,
    },
};
</script>

<style lang="less" scoped>
/deep/ .van-tabs__wrap {
    height: 50px;
}

.bbox {
    .empty-box {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
        display: flex;
        justify-content: center;
        .img {
            display: inline-block;
            img {
                width: 120px;
                height: 120px;
            }
        }
    }
    .btn {
        width: 100%;
        padding: 0 15px;
        div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 46px;
            border-radius: 4px;
            color: #fff;
            background: #3ca7fa;
        }
    }
}
</style>
